<template>
  <div class="wrapper">
      <a-layout>
        <a-layout>
            <a-layout-header class="title">
                <div class="left">
                    <div class="logo">
                        TeamWork Project
                    </div>
                     <div class="tab">
                        <a-menu v-model="current" mode="horizontal" class="menus" @click="handleMenuChange">
                            <a-menu-item key="mail"> <a-icon type="appstore" />工作台</a-menu-item>
                            <a-menu-item key="project"> <a-icon type="profile" />项目管理</a-menu-item>
                            <a-menu-item key="team"> <a-icon type="team" />团队成员</a-menu-item>
                            <a-menu-item key="setting"> <a-icon type="setting" />系统设置</a-menu-item>
                        </a-menu>
                     </div>
                </div>
                <div class="right">
                     <div>
                     <a-dropdown>
                    <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                    胡佳的个人项目 <a-icon type="down" />
                    </a>
                    <a-menu slot="overlay">
                    <a-menu-item>
                        <a href="javascript:;">1st menu item</a>
                    </a-menu-item>
                    <a-menu-item>
                        <a href="javascript:;">2nd menu item</a>
                    </a-menu-item>
                    <a-menu-item>
                        <a href="javascript:;">3rd menu item</a>
                    </a-menu-item>
                    </a-menu>
                 </a-dropdown>
               </div>
              <div class="img-avater">
                  <img src="../../assets/hujia.jpg" alt="">
                     <span>hujia</span>
              </div>
                </div>
            </a-layout-header>
        </a-layout>
    </a-layout>
      <!-- <div class="title">
          <div class="left">
          </div>
         
          <div class="right">
              
          </div>
      </div> -->
      <router-view />
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
         current: ['setting'],
    };
  },
  watch: {},
  computed: {},
  methods: {
      handleMenuChange(action) {
          const key = action.key;
          this.current = [key];
          this.$router.push(key);
      }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="less" scoped>
.wrapper{
    /deep/.title {
        width: 100%;
        height: 60px;
        background-color: #fff;
       
        padding: 0;
         display: flex;
        flex-direction: row;
        justify-content: space-between;
         box-shadow:2px 2px 1px #ccc;
             z-index: 5;
        .left {
            color: #fff;
            display: flex;
            justify-content: center;
            box-shadow: none;
            .logo {
                width: 285px;
                 background-color: #002140;
                  font-weight: 700;
                 font-size: 26px;
                line-height: 60px;
                padding: 0 18.5px;
            }
            .menus {
              line-height: 61px;

            }
        }
      
        .right {
            line-height: 60px;
            width: 300px;
            display: flex;
            flex-wrap: nowrap;
             justify-content: center;
            align-items: center;
            div {
                 flex: 1;
                 display: flex;
                align-items: center;
                justify-content: center;
                color: #000;
            }
               
            img {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                margin: 0 10px;
            }
            .ant-dropdown-link {
                color: #000;
            }
        }
          
        
    }
}
</style>